import { parseTime } from "@/utils/index";
import { mapState, mapActions } from "vuex";
import { status } from '@/api/hmmm/constants.js'
import { remove, list, changeState } from "@/api/hmmm/articles"
import addArticle from "../../components/articles-add"
import PreviewArticle from "../../components/articles-preview"
import 'video.js/dist/video-js.css'
export default {
  name: "articles",
  data() {
    return {
      page: {
        page: 1,
        pagesize: 10,
      },
      searchFrom: {
        key: "",
        state: "",
      },
      showDialog: false,
      showPreviewDialog: false,
      id: 0,
      showViewDialog: false,
      url: ''
    };
  },
  methods: {
    ...mapActions("article", ["updateArticles"]),
    // 1. 过滤页面时间
    parsetime(row, column) {
      const time = parseTime(row.createTime);
      return time;
    },
    // 2. 过滤页面状态
    updateStatus(row, column, cellValue) {
      const f = status.find(item => item.value == cellValue);
      return f ? f.label : "";
    },
    // 3. 删除功能的实现
    delArticle(row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (res.status !== 200) {
          return this.$message.error('删除失败');
        } else {
          this.$message.success('删除成功');
          this.updateArticles(this.page)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 4. 换页功能的实现
    handleCurrentChange(val) {
      this.page.page = val;
      this.updateArticles(this.page);
    },
    // 5. 页面内容的实现
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.updateArticles(this.page);
    },
    // 6. 禁用功能的实现
    showbtn(row, column) {
      if (row.state !== 1) {
        return false;
      } else {
        return true;
      }
    },
    // 7. 禁用按钮的转换
    async changeState(row) {
      if (row.state == 1) {
        const data = {
          id: row.id,
          state: 0
        }
        const res = await changeState(data)
        if (res.status !== 200) {
          return this.$message.error('状态改变失败')
        } else {
          this.$message.success('状态改变成功')
          this.updateArticles(this.page)
        }
      } else {
        const data = {
          id: row.id,
          state: 1
        }
        const res = await changeState(data)
        if (res.status !== 200) {
          return this.$message.error('状态改变失败')
        } else {
          this.$message.success('状态改变成功')
          this.updateArticles(this.page)
        }
      }
    },
    // 8. input输入框的清除功能
    empty(formName) {
      this.$refs[formName].resetFields();
    },
    // 9. input的搜索功能
    searchArticles(formName) {
      this.updateArticles({
        page: 1,
        pagesize: 10,
        keyword: this.$refs[formName].model.key || null,
        state: this.$refs[formName].model.state || null
      })
      this.$message.success('查询成功~')
    },
    // 10. 添加功能的实现
    addArticle() {
      this.id = 0
      this.showDialog = true
    },
    // 11. 预览功能的实现
    async look(row) {
      this.id = row.id
      // const data = {
      //   id: row.id
      // // }
      // const res = await detail(data)
      // console.log(res);
      this.showPreviewDialog = true;
    },
    // 12. 修改功能的实现
    updateContent(row) {
      this.id = row.id
      this.showDialog = true
    },
    showVideo(url) {
      this.url = url;
      this.showViewDialog = true;
      this.$refs.video.load();
    },
    // 14. 关闭视频弹窗
    onClose() {
      this.showViewDialog = false
      this.$refs.video.pause();
    }
  },
  async mounted() {
    this.updateArticles(this.page);
    const { data: res } = await list(this.page);
    setTimeout(()=>{this.initVideo},300)
  },
  computed: {
    ...mapState("article", ["articleList"]),
  },
  components: {
    addArticle,
    PreviewArticle
  }
};